<template>
  <div class="Header">
    <div class="header-left" @click="handleCollapse">
            <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
    </div>
    <div class="header-right">
      <img src="../../assets/noHeader.png" alt=""/>
      <span>
        <a href="javascript:;">{{username}}</a>
      </span>
      <span class="logout" @click="handleLogout">退出</span>
    </div>
  </div>
</template>

<script>
import memoryUtils from '@/utils/memoryUtils';
import storageUtils from '@/utils/storageUtils'
export default {
  name: 'Header',
  props: {
    isCollapse: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      username: '吴',
      image: ''
    }
  },
  mounted () {
    this.check();
  },
  methods: {
    // 是否展开isCollapse
    handleCollapse () {
      let is = !this.isCollapse;
      this.$emit('isCollapseClick', is)
    },
    check () {
      this.username = memoryUtils.user.username || null;
    },
    handleLogout () {
      storageUtils.removeUser();
      memoryUtils.user = '';
      this.$router.push('/login');
      this.$message.success('退出成功')
    }
  }
}
</script>

<style scoped>
.Header {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 100%;
  height: 100%;
  /* background-color: pink; */
}
.header-left {
  line-height: 60px;
  cursor: pointer;
}
.header-left> i {
  font-size: 30px;
}
.header-right {
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  width: 150px;
  height: 100%;
}
.header-right span {
  display: inline-block;
  margin-left: 5px;
}
.header-right img {
  margin-top: 10px;
  width: 40px;
  height: 40px;
}
.logout {
  font-size: 14px;
  cursor: pointer;
}
.logout:hover {
  color: deepskyblue;
}
</style>
